<template>
  <div>
    <el-descriptions title="" :column="3" border :lebalStyle="lebalStyle" :contentStyle="contentStyle">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          地址
        </template>
        {{form.address}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          经度
        </template>
        {{form.lng}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          纬度
        </template>
        {{form.lat}}
      </el-descriptions-item>
    </el-descriptions>


    <baidu-map
      style="display:flex;flex-direction: column-reverse;"
      id="baiduMap"
      :zoom="zoom"
      :center="center"
      @ready="mapReady"
      @click="getLocation"
      :scroll-wheel-zoom="true"
    >
      <div style="display:flex;justify-content:flex-start;margin:15px">
        <bm-auto-complete v-model="center.address" :sugStyle="{zIndex: 999999}">
          <el-input v-model="center.address" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
        </bm-auto-complete>
        <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
      </div>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-marker :show="infoWindowShow" :position="center">
<!--        <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
      </bm-marker>
      <bm-info-window :position="center" :show="infoWindowShow" @clickclose="infoWindowClose">
<!--        <p>地址:{{this.address}}</p>-->
        <p>经度:{{center.lng}}</p>
        <p>纬度:{{center.lat}}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name:"BaiduApi",
  props: {
    centerPoint:{
      type: Object
    },

  },
  data () {
    return {
      lebalStyle:{
        width:"10%",
      },
      contentStyle:{
        width:"21%",
      },
      infoWindowShow:false,
      zoom:15,
      point:'',
      form: {
        address:'晋江市',
        lng:118.55844498921052,
        lat:24.792142359330716,
      },
      center: {
        address:'晋江市',
        lng:118.55844498921052,
        lat:24.792142359330716,
      },
    }
  },
  created() {
    this.form = JSON.parse(JSON.stringify(this.centerPoint));
    this.center = JSON.parse(JSON.stringify(this.centerPoint));
    this.infoWindowShow=true
  },
  methods: {
    //地图初始化
    mapReady({ BMap, map }) {
      this.BMap=BMap
      this.map=map
    },
    //点击获取经纬度
    getLocation(e){
      this.center.lng=e.point.lng
      this.center.lat=e.point.lat
      let myGeo = new this.BMap.Geocoder()
      myGeo.getLocation(e.point, rs => {
        this.center.address = rs.address
        this.infoWindowShow=true
        this.form = JSON.parse(JSON.stringify(this.center));
        this.$emit("getAddress",this.form);
      })

    },
    getBaiduMapPoint(){
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.center.address,rs => {
        if(rs){
          this.center.lng=rs.lng
          this.center.lat=rs.lat
          this.infoWindowShow=true
          this.form = JSON.parse(JSON.stringify(this.center));
          this.$emit("getAddress",this.form);
        }

      })
    },
    //信息窗口关闭
    infoWindowClose(){
      this.infoWindowShow=false
    },
  },
}
</script>

<style lang="scss" scoped>
#baiduMap{
  height: 500px;
  width: 100%;
}
</style>
